import React from 'react';
import { NavBar, Icon, DatePicker, List, InputItem, Button } from 'antd-mobile';

import './ReservationForm.css';

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const minDate = new Date(nowTimeStamp);
const maxDate = new Date(nowTimeStamp + 1e9);

export default class ReservationForm extends React.Component {
    state = {
        price: 0,
        distance: '',
        startDate: now,
        endDate: now,
    }

    submit() {
        this.props.submit(this.state);
        this.props.click();
    }

    render() {
        return (
            <div className="reservation-form">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={this.props.click}
                >预约停车</NavBar>
                <List className="date-picker-list">
                    <InputItem
                        clear
                        placeholder="请输入目的地"
                        onChange={(distance) => { this.setState({ distance }) }}
                    >目的地</InputItem>
                    <InputItem
                        type='money'
                        placeholder="请输入期望价格"
                        clear
                        onChange={(price) => { this.setState({ price }) }}
                    >期望价格</InputItem>
                    <DatePicker
                        minDate={minDate}  
                        maxDate={maxDate}                                          
                        value={this.state.startDate}
                        title="到达时间"                        
                        onChange={startDate => this.setState({ startDate })}
                        >
                        <List.Item arrow="horizontal">到达时间</List.Item>
                    </DatePicker>
                    <DatePicker
                        minDate={minDate}
                        maxDate={maxDate}                                          
                        value={this.state.endDate}
                        title="离开时间"                        
                        onChange={endDate => this.setState({ endDate })}
                        >
                        <List.Item arrow="horizontal">离开时间</List.Item>
                    </DatePicker>
                </List>
                {this.state.distance.length &&  this.state.price ? 
                    <Button type="primary" className="reservation-form-submit" onClick={this.submit.bind(this)}>确定</Button> :
                    <Button type="primary" className="reservation-form-submit" disabled>确定</Button>
                }
            </div>
        )
    }
}
